<template>
  <div id="app">
    <h2>----------App组件中的modules中的内容----------</h2>
    <p>{{$store.state.moduleA.name}}</p>
    <p>{{$store.getters.firstName}}</p>
    <p>{{$store.getters.twoName}}</p>
    <p>{{$store.getters.threeName}}</p>
    <button @click="updateModulesClick">修改modules的名称</button>
    <button @click="asyncUpdateModulesClick">异步修改modules的名称</button>

    <h2>----------App组件中的info----------</h2>
    <p>{{$store.state.info}}</p>
    <button @click="updateInfo">更新info信息</button>

    <h2>----------App组件中的student----------</h2>
    <p>年龄大于20的学生：{{$store.getters.more20Age}}</p>
    <p>年龄大于20的学生数量：{{$store.getters.more20AgeLength}}</p>
    <button @click="insertStudent">添加学生</button>
    <button @click="updateStudent">修改学生</button>

    <h2>----------App组件中的count----------</h2>
    <h2>{{count}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="add(5)">+5</button>
    <button @click="dec(5)">-5</button>

    <h2>----------HelloVuex组件中的count----------</h2>
    <hello-vuex/>
  </div>
</template>
<script>
  import HelloVuex from './components/HelloVuex'
  import * as types from './store/mutation-types'

  export default {
    name: 'App',
    components: {
      HelloVuex
    },
    computed: {
      count() {
        return this.$store.state.count
      }
    },
    methods: {
      increment() {
        // 提交mutations
        // this.$store.commit('increment')
        // 发送actions
        this.$store.dispatch('increment')
      },
      decrement() {
        // this.$store.commit('decrement')
        this.$store
          .dispatch('decrement', '这是传入的参数')
          .then(res => {
            console.log(res);
          });
      },
      add(count) {
        this.$store.commit('add', count)
      },
      dec(count) {
        this.$store.commit('dec', {count: count})
      },
      insertStudent() {
        this.$store.commit('insertStudent', {id: 114, name: 'jerry', age: 30})
      },
      updateStudent() {
        this.$store.commit('updateStudent', {id: 113, name: 'tom', age: 30})
      },
      updateInfo() {
        this.$store.commit(types.UPDATE_INFO, {height: 180})
      },

      updateModulesClick() {
        this.$store.commit('updateName', {name: 'LiLei'})
      },
      asyncUpdateModulesClick() {
        this.$store.dispatch('aUpdateName', {name: 'LiLei'})
      }
    }
  }
</script>

<style>
</style>
